<script setup>
// 安全区域可以获取屏幕宽度
import { useSysInfoStore } from '@/store/system';
import { ref } from 'vue';
const sysStore = useSysInfoStore()

// 创建变量保存滚动百分比
const left = ref(0)
// 监听滚动
const onScroll = (event) => {
  // 滚动的像素占据整个屏幕的宽度百分比就是底部绿条需要滑动的范围
  left.value = event.detail.scrollLeft / sysStore.safeArea.width * 100
}

// 外部传入分类列表
defineProps({
  category: Array
})
</script>

<template>
  <view class="category-head-mutli">
    <scroll-view scroll-x @scroll="onScroll">
      <view class="scroll-wrap">
        <view class="category-head-mutli-item">
          <navigator v-for="item in category" :key="item.id"> 
            <image mode="widthFix" :src="item.icon" /> 
            <text>{{ item.name }}</text> 
          </navigator>
        </view>
        <view class="category-head-mutli-item">
          <navigator v-for="item in category" :key="item.id"> 
            <image mode="widthFix" :src="item.icon" /> 
            <text>{{ item.name }}</text> 
          </navigator>
        </view>
      </view>
    </scroll-view>
    <view class="scroll-bar">
      <view class="scroll-bar-inner" :style="{transform: `translateX(${left}%)`}"></view>
    </view>
  </view>
</template>
  
<style lang="scss">
.category-head-mutli {
  background-color: #f7f7f8;
  position: relative;
  padding-bottom: 30rpx;

  .scroll-wrap {
    width: 200%;
    display: flex;
  }

  .category-head-mutli-item {
    width: 50%;
    display: flex;
    flex-wrap: wrap;

    navigator {
      text-align: center;
      box-sizing: border-box;
      width: 20%;
      padding: 15rpx;

      image {
        width: 100rpx;
        display: block;
        margin: 0 auto;
      }

      text {
        font-size: 26rpx;
        color: #666;
      }
    }
  }

  .scroll-bar {
    position: absolute;
    bottom: 15rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 100rpx;
    height: 8rpx;
    background-color: #e2e2e2;
    z-index: 200;

    .scroll-bar-inner {
      width: 50%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      background-color: #00c09b;
    }
  }
}
</style>